<script setup lang="ts">
import type { TestDetail, TestResult } from '@/types/healthTest'
import { onMounted } from 'vue';
// 获取页面参数
const query = defineProps<{
  testResultTitle: string,
  testResult: string
}>()

const select = async () => {
  console.log(query.testResult)
}

onMounted(select)
</script>
<template>
  <view class="box">
    <text class="title">
      你的测试结果为
    </text>
    <view class="show">
      <view class="result">{{ query.testResultTitle }}</view>
      <view class="container">{{ query.testResult }} </view>
    </view>
    <view class="return">
      <navigator
        hover-class="none"
        class="button navigator"
        url="/pages/index/index"
        open-type="switchTab"
      >
        返回首页
      </navigator>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #472ec7;
  background-image: url('@/static/images/结果图片.jpg');
  text-align: center;
  background-size: cover;

  .return{
    background-color: rgb(240, 107, 30);
    display: inline-block;
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 15px;
    margin-top: 15px;
  }
  .title {
    height: 180rpx;
    line-height: 180rpx;
    color: #a73951;
    font-size: 35rpx;
  }

  .show {
    margin: 0 30rpx;
    background: #c7c6c6;
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
    padding: 25rpx 0;

    .result {
      color: rgb(195, 14, 14);
      font-size: 40rpx;
      height: 120rpx;
      line-height: 120rpx;
      font-weight: 400;
      opacity: 0.8; /* 设置透明度为50% */
    }

    .container {
      text-indent: 2em;
      margin: 20rpx;
      padding: 10rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      background-color: #d4dae1;
      text-align: left;
      border-radius: 20rpx;
      opacity: 1; /* 设置透明度为50% */
    }
  }
}
</style>